/*
Copyright 2020-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/

/* TODO: Match the user's theme: https://github.com/element-hq/element-web/issues/12794 */

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400;
    src: url("~matrix-react-sdk/res/fonts/Nunito/Nunito-Regular.ttf") format("truetype");
}

$dark-fg: #edf3ff;
$dark-bg: #363c43;
$light-fg: #2e2f32;
$light-bg: #fff;
body {
    font-family: Nunito, Arial, Helvetica, sans-serif;
    background-color: $dark-bg;
    color: $dark-fg;
}

body.theme-light {
    background-color: $light-bg;
    color: $light-fg;
}

body,
html {
    padding: 0;
    margin: 0;
}

#jitsiContainer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#joinButtonContainer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;

    /* Hidden by default to avoid flashing the prejoin screen at the user when */
    /* we're supposed to skip it anyways */
    visibility: hidden;
}

.joinConferenceFloating {
    display: table-cell;
    vertical-align: middle;
}

.joinConferencePrompt {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    text-align: center;
}

#joinButton {
    /* A mix of AccessibleButton styles */
    cursor: pointer;
    padding: 7px 18px;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    font-size: 14px;
    color: #ffffff;
    background-color: #03b381;
    border: 0;
}

.icon {
    $icon-size: 42px;
    margin-top: -$icon-size; /* to visually center the form */

    &::before {
        content: "";
        background-size: contain;
        background-color: $dark-fg;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-image: url("~matrix-react-sdk/res/img/element-icons/call/video-call.svg");
        mask-size: $icon-size;
        display: block;
        width: $icon-size;
        height: $icon-size;
        margin: 0 auto; /* center */
    }
}

body.theme-light .icon::before {
    background-color: $light-fg;
}
